import { useState, memo } from 'react';
import { Area as AntArea } from '@ant-design/plots';
import { isEqual } from 'lodash';

const DemoArea = memo(
  ({ data, config, onReady }) => {
    const chartConfig = {
      data,
      xField: 'date',
      yField: 'value',
      seriesField: 'type',
      smooth: true,
      animation: {
        appear: {
          animation: 'path-in',
          duration: 1200,
        },
      },
      legend: {
        position: 'top-right',
      },
      tooltip: {
        showCrosshairs: true,
        shared: true,
      },
      ...config,
      onReady,
    };
    return <AntArea {...chartConfig} />;
  },
  (pre, next) => {
    return isEqual(pre?.data, next?.data) && isEqual(pre?.config, next?.config);
  },
);

const AreaChart = ({ data = null, config = {}, onReady = () => {} }) => {
  // 默认模拟数据 - 累计访问趋势
  const defaultData = [
    { date: '01/01', value: 100, type: '累计用户' },
    { date: '01/02', value: 300, type: '累计用户' },
    { date: '01/03', value: 500, type: '累计用户' },
    { date: '01/04', value: 800, type: '累计用户' },
    { date: '01/05', value: 1200, type: '累计用户' },
    { date: '01/06', value: 1500, type: '累计用户' },
    { date: '01/07', value: 2000, type: '累计用户' },
  ];

  return <DemoArea data={data || defaultData} config={config} onReady={onReady} />;
};

export default AreaChart;